import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {LinearButton} from '../../components/Button';
import I18n from 'react-native-i18n';
import WalletUtils from '../../utils/wallet/WalletUtils';
import {updateUserInfo} from '../../redux/action';
import {updateUser} from '../../api/user';
import StorageManager, {USER_INFO} from '../../storage';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#160231',
  },
  infoForm: {
    textAlign: 'center',
    paddingLeft: 40,
    paddingRight: 40,
  },
  password: {
    backgroundColor: '#fff',
    height: 44,
    marginBottom: 20,
    borderRadius: 22,
    paddingLeft: 22,
    paddingRight: 22,
  },
  warning: {
    color: 'white',
    textAlign: 'center',
  },
});

class CreateWalletScreen extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      password: '',
      repeatPassword: '',
    };
  }

  componentDidMount() {}

  doNext = async () => {
    if (this.state.password !== this.state.repeatPassword) {
      return;
    }

    this._showLoading('generating...');

    let {keystore, address} = await WalletUtils.generalWallet(
      this.state.password,
    );

    console.log(JSON.stringify(keystore), address);

    updateUser({
      keystore: JSON.stringify(keystore),
      address,
      userToken: this.props.userInfo.token,
    })
      .then(async (res) => {
        await this.props.updateUserInfo(res.data);

        this._hideLoading();

        if (
          this.props.navigation.state.params &&
          this.props.navigation.state.params.from == 'home'
        ) {
          this.props.navigation.goBack();
        } else {
          this.props.navigation.navigate('Home');
        }
      })
      .catch((err) => {
        console.log(err);
        this._hideLoading();
        this._showAlert({content: err.msg || err + ''});
      });
  };

  renderComponent = () => {
    return (
      <View style={styles.container}>
        <ScrollView keyboardDismissMode style={styles.infoForm}>
          <Image
            style={{
              marginBottom: 0,
              width: 120,
              height: 120,
              alignSelf: 'center',
              marginTop: 117,
            }}
            source={require('../../assets/login/create_wallet.png')}
            resizeMode="contain"
          />
          <Text
            style={{
              color: 'white',
              fontSize: 20,
              fontWeight: 'bold',
              alignSelf: 'center',
              marginBottom: 30,
            }}>
            {I18n.t('login.create_wallet')}
          </Text>
          <TextInput
            style={styles.password}
            placeholder={I18n.t('login.password')}
            placeholderTextColor="#a1a1a1"
            secureTextEntry={true}
            onChangeText={(text) => {
              this.setState({
                password: text,
              });
            }}></TextInput>
          <TextInput
            style={styles.password}
            placeholder={I18n.t('login.password_repeat')}
            placeholderTextColor="#a1a1a1"
            secureTextEntry
            onChangeText={(text) => {
              this.setState({
                repeatPassword: text,
              });
            }}></TextInput>

          <Text style={styles.warning}>{I18n.t('login.wallet_warning')}</Text>

          <LinearButton
            text={I18n.t('login.next')}
            onPress={() => {
              this.doNext();
            }}
          />
        </ScrollView>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
});

const mapDispatchToProps = (dispatch) => ({
  updateUserInfo: (item) => dispatch(updateUserInfo(item)),
});

export default connect(mapStateToProps, mapDispatchToProps)(CreateWalletScreen);
